<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ImageLoader Profiling 2.x</title>
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/skins/sam/logger.css">
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/imageloader/imageloader-min.js"></script>
<script type="text/javascript" src="../../build/profiler/profiler-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="profiler.js"></script>

<style type="text/css">
.intro { text-align:center; width:100%; color:#555; font:bold 11pt arial; margin-top:20px; }
.stopBtnActive { background-color:#555; color:#fff; font-weight:bold; cursor:pointer; margin:0 3px; padding:2px; }
.everything { position:relative; height:2000px; }
.topmain { position:absolute; top:70px; left:180px; height:156px; width:240px; background:#ddd no-repeat; }
.hoverme { position:absolute; top:340px; left:80px; background-color:#bbb; height:90px; width:325px; }
.hoverme2 { position:absolute; top:340px; left:460px; background-color:#bbb; height:90px; width:325px; }
.png { position:absolute; top:140px; left:540px; width:61px; height:34px; }
.square { position:absolute; top:140px; left:690px; }
.waydown { position:absolute; top:700px; left:400px; height:42px; width:77px; }
#waydown2 { top:900px; }
#waydown3 { top:1300px; }
#waydown4 { top:1100px; background:url('http://us.i1.yimg.com/us.yimg.com/i/ar/sp/fifa/rooney77x42.jpg'); }
.waydownCF { background:none !important; }
.classtest { position:absolute; top:240px; left:500px; background:url('http://us.i1.yimg.com/us.yimg.com/i/us/fd/cn/grdbg/cucumber.jpg'); height:82px; width:146px; }
.classtest2 { position:absolute; top:500px; left:80px; }
.customevent { position:absolute; height:120px; width:120px; top:510px; left:500px; background-color:#ccc; }
.classloadingtest { position:absolute; top:700px; left:130px; height:72px; width:100px; background:url('http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg'); }

.yui-imgload { background:none !important; }
.yui-imgloadwithload { background:#ddd url('http://l.yimg.com/a/i/us/tr/b/destrec_loader_2.gif') no-repeat 50% 50% !important; }
</style>
</head>
<body class='yui-skin-sam'>

<div class='intro'>Image Loader -|- <span id='profilerstop' class='stopBtnActive'>c l i c k</span> to stop profiler</div>
<div class='everything' id='everything'>
	<div class='topmain' id='topmain' title='group 1; mouseover anywhere on page; 2 sec limit'></div>
	<div class='hoverme' id='hoverme' title='group 2; mouseover left FIFA, or click on right FIFA; 4 sec limit'></div>
	<div class='hoverme2' id='hoverme2' title='group 2; mouseover left FIFA, or click on right FIFA; 4 sec limit'></div>
	<div class='png' id='pngimg' title='group 5; no trigger; 5 sec limit'></div>
	<div class='square'>
		<img id='squareImg' height='40' width='40' style='visibility:hidden;' title='group 3; scroll; 8 sec limit' />
	</div>
	<div class='waydown' id='waydown' title='group 4; scroll, or resize; will show immediately if above the fold; no limit'></div>
	<div class='waydown' id='waydown2' title='group 4; scroll, or resize; will show immediately if above the fold; no limit'></div>
	<div class='waydown' id='waydown3' title='group 4; scroll, or resize; will show immediately if above the fold; no limit'></div>
	<div class='waydown waydownCF' id='waydown4' title='group 4; scroll, or resize; will show immediately if above the fold; no limit'></div>
	<div class='classtest yui-imgload' id='classtest1' title='using css class to override bg img' ></div>
	<img class='classtest2 yui-imgload' id='classtest2' style='background:url("http://us.i1.yimg.com/us.yimg.com/i/us/fd/cn/grdbg/sandwich.jpg");' width='195' height='105' src='http://us.i1.yimg.com/us.yimg.com/i/us/tr/b/1px_trans.gif' title='using css class to override img - this is an &lt;img&gt; w/ trans bg img and bg url' />
	<div class='customevent' id='customevent' title='using custom event to load; double click this to fire the custom event'></div>
	<div class='classloadingtest yui-imgloadwithload' id='classloadingtest'></div>

</div>

</body>
</html>
